/* * @Author: silas * @Date: 2020-11-26 09:52:38 * @Last Modified by: silas *
@Last Modified time: 2020-11-26 10:14:13 */
<template>
    <div class="g-wrapper">
        <div class="contentTopTitle">
            <div class="fl">
                <div class="title">云网-月账</div>
            </div>
        </div>
        <div>
            <el-form
                :inline="true"
                :model="form"
                label-width="60px"
                class="formList"
            >
                <el-form-item label="区域" style="width: 20%">
                    <dx-cascader :area_id.sync="form.areaId" ref="cascader" />
                </el-form-item>
                <el-form-item label="账期" style="width: 20%">
                    <el-date-picker
                        v-model="form.year"
                        type="year"
                        placeholder="选择年"
                        value-format="yyyy"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="业务类型" style="width: 20%">
                    <el-select v-model="form.type" multiple collapse-tags clearable>
                        <el-option label="全部" value="all" />
                        <el-option label="取消全部" value="cancel" />
                        <el-option
                            v-for="item in typeList"
                            :key="item.indexCode"
                            :label="item.indexName"
                            :value="item.indexCode"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="展现类型" style="width: 20%">
                    <el-select v-model="form.show">
                        <el-option
                            v-for="item in showList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="width: 5%">
                    <el-button size="small" type="primary" @click="search()"
                        >查询</el-button
                    >
                </el-form-item>
                <el-form-item style="width: 5%">
                    <el-button
                        size="small"
                        style="margin-left: 10px"
                        type="orange"
                        @click="exportExcel(0)"
                        >导出</el-button
                    >
                </el-form-item>
                <el-form-item style="width: 5%">
                    <el-button
                        size="small"
                        style="margin-left: 10px"
                        type="info"
                        @click="exportExcel(1)"
                        >导出明细</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <div class="table-content">
            <div class="tableBox">
                <el-table
                    v-loading="tableLoading"
                    :data="tableData"
                    height="85vh"
                    style="width: 100%"
                    class="tableTh28"
                    border
                    stripe
                    :span-method="arraySpanMethod"
                    ref="table"
                >
                    <el-table-column
                        label="来源"
                        prop="incomeName"
                        min-width="120"
                    ></el-table-column>

                    <el-table-column
                        label="业务类型"
                        prop="pname"
                        min-width="120"
                    ></el-table-column>
                    <el-table-column  label="指标编码" prop="pid">
                    </el-table-column>
                    <el-table-column
                        min-width="120"
                        v-for="(it, i) in titles"
                        :key="i"
                        :label="it"
                        :prop="'indexValue' + (i + 1)"
                    ></el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script>
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
import prefixAPI from "@/api/prefixAPI";
import { mergeRow } from "@/utils/mixin";

export default {
    data() {
        // var d = new Date().getMonth
        var date = new Date(),
            year = date.getFullYear(),
            month = date.getMonth() + 1,
            d = new Date(year, month, 0),
            days = d.getDate();
        return {
            form: {
                year: "",
                areaId: "",
                type: "",
                show: 1
            },
            typeList: [
            ],
            showList: [
                {
                    label: "本期发生",
                    value: 1
                },
                {
                    label: "年度累计",
                    value: 2
                },
                {
                    label: "环比",
                    value: 3
                }
            ],
            accountInfo: {},
            tableLoading: false,
            tableData: [],
            spanArr: [],
            titles: [],
            // titles: Array.from(
            //     new Array(12),
            //     (item, value) =>
            //         (value =
            //             year +
            //             "" +
            //             (value + 1 < 10 ? "0" + (value + 1) : value + 1))
            // )
        };
    },
    mounted() {
        var that = this;

        that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
        that.form.areaId = that.accountInfo.areaId;
        that.initData();
    },
     watch: {
        'form.type' (newValue, oldValue) {
            console.log(this.form.type);
            if(this.form.type.indexOf('all') >= 0) {
                var data = [];
                this.typeList.map(it => {
                    data.push(it.indexCode);
                })
                this.form.type = data;
            }
            if(this.form.type.indexOf('cancel') >= 0) {
                this.form.type = [];
            }
        }
    },
    methods: {
        async initData() {
            var that = this,
                list = [];

            that.form.year = await that.getMonth(that.form.areaId);
            list = await that.getType(that.form.areaId);
            that.typeList = [...that.typeList, ...list];
            that.getData(that.form);
        },
        getMonth(id) {
            var that = this;

            return new Promise(resolve => {
                $budgetAPI.getCloudMonth(
                    {
                        areaId: id
                    },
                    res => {
                        if (res && res.code == 0) {
                            resolve(res.content);
                        }
                    }
                );
            });
        },
        getType(id) {
            var that = this;

            return new Promise(resolve => {
                $budgetAPI.getCloudType(
                    {
                        areaId: id
                    },
                    res => {
                        if (res && res.code == 0) {
                            resolve(res.content);
                        }
                    }
                );
            });
        },
        getData(obj) {
            var that = this;

            that.tableLoading = true;
            that.tableData = [];
            $budgetAPI.getCloudMonthData(
                {
                    areaId: obj.areaId,
                    indexCodes: obj.type && obj.type.toString() || '',
                    acctMonth: obj.year,
                    type: obj.show
                },
                res => {
                    if (res && res.code == 0) {
                        that.tableLoading = false;
                        res.content.data.map((it, i) => {
                            it.dataList.map((item, index) => {
                                it["indexValue" + (index + 1)] =
                                    item.indexValue;
                            });
                        });
                        that.spanArr = mergeRow(res.content.data, [
                            "incomeName"
                        ]);
                        that.titles = res.content.titles;
                        that.tableData = res.content.data;
                    }
                }
            );
        },
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex == 0) {
                return this.spanArr.length && this.spanArr[rowIndex][columnIndex];
            }
        },
        search() {
            var that = this;

            that.getData(that.form);
        },
        exportExcel(val) {
            var that = this,
                areaId = that.form.areaId,
                year = that.form.year,
                indexCode = that.form.type.toString(),
                type = that.form.show;

            let token = getCookie("token");
            // let type = this.typeText.toString();

            if (process.env.NODE_ENV == "development") {
                window.location.href =
                    prefixAPI.loc +
                    "/api/cloudFct/exportCloudFctMonth?token=" +
                    token +
                    "&areaId=" +
                    areaId +
                    "&acctMonth=" +
                    year +
                    "&indexCodes=" +
                    indexCode +
                    "&type=" +
                    type +
                    "&showDetail=" +
                    val;
            } else if (process.env.NODE_ENV == "production") {
                window.location.href =
                    prefixAPI.hp +
                    "/api/cloudFct/exportCloudFctMonth?token=" +
                    token +
                    "&areaId=" +
                    areaId +
                    "&acctMonth=" +
                    year +
                    "&indexCodes=" +
                    indexCode +
                    "&type=" +
                    type +
                    "&showDetail=" +
                    val;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.g-wrapper {
    .table-content {
        .table-header {
            display: flex;
            justify-content: space-between;
            .btn-right {
                display: flex;
            }
            .table-title {
                font-size: 14px;
                font-weight: bold;
                height: 30px;
                line-height: 30px;
                span {
                    display: inline-block;
                    width: 5px;
                    height: 5px;
                    background-color: #418ee9;
                    border-radius: 1000%;
                    overflow: hidden;
                    margin-right: 10px;
                    margin-bottom: 3px;
                }
            }
        }
        .content {
            position: relative;
        }
    }
}
</style>
